<template>
  <ul class="switches button-unselected">
    <li 
      class="switch-item" 
      v-for="(item,index) in switches" 
      :class="{'select':activeSwitchIndex == index}"
      @click="switchItem(index)"
      :key="index">
      <span>{{item.name}}</span>
    </li>
  </ul>
</template>

<script type="text/ecmascript-6">
  import { mapMutations } from 'vuex'
  export default {
    props: {
      switches: {
        type: Array,
        default: [
          {name: 'A面'},
          {name: 'B面'}
        ]
      },
      activeSwitchIndex: {
        type: Number,
        default: 0
      }
    },
    methods: {
      switchItem(index) {
        this.$emit('click', index)
      },
      ...mapMutations('lottery', {
        setCurrentComponent: 'SET_CURRENT_COMPONENT'
      })
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import '~@/assets/styles/variables.styl'
  .switches
    display: flex
    align-items: center
    height: 26px
    border-radius: 3px
    box-sizing border-box 
    .switch-item
      flex: 1
      text-align center
      font-size 13px
      height 100%
      line-height 26px
      cursor pointer
      padding 0 10px
      min-width 30px
      &:first-child 
        border-bottom-left-radius 3px 
        border-top-left-radius 3px
      &:last-child  
        border-bottom-right-radius 3px 
        border-top-right-radius 3px
      &.select
        background: $color-theme-red
        color: #fff
        
</style>